<script setup lang="ts">
import type {ocrType, siteType} from "@/api/settings_api";
import {reactive, ref} from "vue";
import {getSiteConfigApi, updateSiteConfigApi} from "@/api/settings_api";
import {Message} from "@arco-design/web-vue";

interface Props {
  name: keyof siteType
}

const props = defineProps<Props>()

const data = reactive<siteType[typeof props.name]>({
  url: "",
  compress: 0,
})
const isShow = ref(false)

async function getData() {
  const res = await getSiteConfigApi(props.name)
  if (res.code) {
    Message.error(res.msg)
    return
  }
  Object.assign(data, res.data)
  isShow.value = true
}

getData()

async function update() {
  const res = await updateSiteConfigApi(props.name, data as siteType[typeof props.name])
  if (res.code) {
    Message.error(res.msg)
    return
  }
  Message.success(res.msg)
}

</script>

<template>
  <div class="f_site_base">
    <a-spin :loading="!isShow">
      <slot v-if="isShow" :data="data as any"></slot>
    </a-spin>
    <teleport v-if="isShow" to=".update_btn">
      <a-button type="primary" @click="update">更新</a-button>
    </teleport>
  </div>
</template>

<style lang="less">
.f_site_base {
  .arco-spin {
    width: 100%;
  }
}
</style>